<template>
    <div class="user">
        <div class="title">我上传的 
            <el-button @click="upload()" class="button" type="primary" size="mini">上传<i class="el-icon-upload el-icon--right"></i></el-button>
        </div>
        <div class="table">
            <table rules=none cellspacing=0 align=center>
                <thead>
                    <th>标题</th>
                    <th>描述</th>
                    <th class="todoh">操作</th>
                </thead>
                <tbody>
                    <tr v-for="(item,index) in resource" :key="item.id" :style="{'color': $parent.$parent.selectedIndex == index ? 'red':''}" @dblclick="$parent.$parent.playMusic(item.audioUrl,index,item.id)" >
                        <td><img class="img-audio" @click="$parent.$parent.playMusic(item.audioUrl,index,item.id)" :src="$parent.$parent.selectedIndex == index && $parent.$parent.playstate ? isplaybuttonUrl : noplaybuttonUrl"><div style="float:left">{{item.title}}</div><img @click="$parent.$parent.playMv(item.videoUrl)" v-if="item.videoUrl != ''" class="img-video" src="../assets/mv.png" alt=""> </td>
                        <td>{{item.describeStr}}</td>
                        <td class="todo">
                            <el-button @click="edit(item.id)" type="primary" size="mini" icon="el-icon-edit" circle></el-button>
                             <el-button @click="deleteResrouce(item.id,index)" type="danger" size="mini" icon="el-icon-delete" circle></el-button>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</template>
<script>
import axios from 'axios'
import { ElMessage } from 'element-plus'
export default {
    data() {
        return {
            noplaybuttonUrl:require('../assets/play.png'),
            isplaybuttonUrl:require('../assets/is_play.png'),
            resource:[]
        }
    },
    mounted(){
        console.log(this.$route.query.username)
        axios.get('http://127.0.0.1:3000/api/users?username='+this.$route.query.username).then(res=>{
            this.resource = res.data.data
        })
    },
    methods:{
        upload(){
            this.$router.push({
                path:'/upload',
                query:{
                    username:this.$route.query.username,
                    type:0 //0表示新增 1表示更新
                }
            })
        },
        edit(id){
            this.$router.push({
                path:'/upload',
                query:{
                    username:this.$route.query.username,
                    type:1, //0表示新增 1表示更新,
                    id:id
                }
            })
        },
        deleteResrouce(id,index){
            axios.post('http://127.0.0.1:3000/api/delete',{id:id}).then(res=>{
                if(res.data.code == 0){
                    ElMessage.success({
                        message: '删除成功',
                        type: 'success'
                    })
                    this.resource.splice(index,1)
                }
            })
        }
    }
}
</script>
<style lang="less" scoped>
.todoh{
    float: right;
    margin-right: 50px;
}
.todo{
    float: right;
}
.table{
    height: calc(100% - 30px);
    width: 100%;
    thead{
        th{
            padding: 5px;
            // border-bottom: solid 1px rgba(0, 0, 0,0.1);
            text-align: left;
            background-color: transparent;
        }
    }
    tbody{
        tr:hover{
            background-color: #B3C0D1;
        }
        // background-color: rosybrown;
        tr{
            background-color: transparent;
            border: 0;
        }
    td{  
        background-color: transparent;
        line-height: 30px;
            padding: 5px;         
            border: 0;
            height: 30px;
        }
        .img-audio{
            float: left;
            width: 30px;
            height: 30px;
        }
        .img-video{
            margin-left: 2px;
            float: left;
            width: 25px;
            height: 25px;
            margin-top: 2.5px;
        }
        .img-video:hover,.img-audio:hover,div:hover{
            cursor: pointer;
        }
        
    }
    table{
        // border: solid 1px silver;
        background-color: transparent;
        padding: 10px;
        width: 100%;
    }
}
.title{
    font-size: 18px;
    width: 100%;
    height: 30px;
    // background-color: red;
    // text-align: center;
    border-bottom: solid 1px rgba(0, 0, 0,0.1);
    .button{
        display: block;
        width:80px;
        float: right;
    }
}
.user{
    padding: 20px;
    width: 100%;
    height: 100%;
    // background-color: wheat;
    border: solid 1px silver;
    overflow: auto;
}
</style>